<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>huaweidiannao</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
    <script src="./js/js_diannao16s.js"></script>
    <!-- <link rel="shortcut icon" href="#" /> -->
    <link rel="stylesheet" href="./css/foot.css">
    <link rel="stylesheet" href="./css/huaweidiannao.css">

</head>
<body>
    
    <div class="head">
        <div class="head_content1">
            <div class="logo">冯柏源22215220432</div>
            <ul>
              <li><a href="./index-手机.html">手机 <div class="bottom"></div></a>  </li>
              <li><a href="./index-电脑-1.html">电脑  <div class="bottom"></div></a> </li>
              <li><a href="./index-平板.html">平板   <div class="bottom"></div></a></li>
              <li><a href="./watch.html">穿戴  <div class="bottom"></div></a></li>
              <li><a href="./404.html">耳机音响  <div class="bottom"></div></a></li>
              <li><a href="./index-全屋智能.html">全屋智能  <div class="bottom"></div></a></li>
              <li><a href="./404.html">路由器 <div class="bottom"></div></a> </li>
            </ul>
        </div>

              <div class="head_content2">
                    <ul>
                      <li><a href="./index-服务支持.html">服务支持 <div class="bottom"></div></a> </li>
                      <li><a href="./index_商用.html">商用 <div class="bottom"></div></a> </li>
                      <li><a href="./sreach.html"></a></li>   
                      <li><a href="./denlu.html"></a></li>   
                      <li><a href="./index-商城.html">flytech商城</a></li>
                    </ul>
                </div>
         </div>

         <div class="c3">
            <span>HUAWEI Mate Book 16s  </span>
             <div class="head_content2" style="position: relative; left: 560px;"> 
               <ul>
                <li><a href="#">功能特征</a></li>
                <li><a href="#">规格参数</a></li>
                <li><a href="#">服务支持</a></li>
                <li><a href="#">购买</a></li>
              </ul>
            </div>
          </div> 

      <!--  -->
     <button id="backToTopBtn" onclick="scrollToTop()"> <span>^</span>回到顶部</button>
     <!--  -->   
     
          <div class="screen1">
            <div class="s1_content1">
                <div><strong>HUAWEI</strong> MateBook 16s</div>
                <div>2.5K 高色准1触控屏 | 13 代英特尔®酷睿™ i9 处理器2 | 超级终端3</div>
                <div>¥ 6999* 起</div>
                <button><a href="">立即购买</a></button>
            </div>
        </div>

        <div class="screen2">
            <div class="s2_1">
                <video src="./imges/imges_首页3/video-1.mp4" loop autoplay></video>
            </div>
             <div class="s2_2">
                <p>创作，一身好本领</p>
                 <div class="s2_2_1">
                    <div class="ziti_1">第十三代</div>
                    <div class="ziti_2">英特尔® 酷睿™ i9 处理器2</div>
                    <div class="ziti_3">性能爆表，实力在升级</div>
                 </div>
                 <div class="s2_2_2">
                     <div class="ziti_1">2.5K准触控屏</div>
                     <div class="ziti_3">专业创作，大显身手</div>
                 </div>
                 <div class="s2_2_2">
                      <div class="ziti_1">超级终端</div>
                      <div class="ziti_3">多屏协同，协作无间</div>
                 </div>
                 <div class="s2_2_2">
                       <div class="ziti_1">华为超材料天线</div>
                       <div class="ziti_3">270米超远联网，窗墙性能更强</div>
                 </div>
                 <div class="s2_2_3">
                    <div class="ziti_1">智慧会议</div>
                    <div class="ziti_3">1080p智能广角摄像头，</div>
                    <div class="ziti_3">应随动人，拍出你的美</div>
                 </div>
             </div>
           <div class="s2_3">
            <p>请把"专业"打在屏幕上</p>
           </div>
        </div>
             

        <div class="screen3">
          <div class="s3_1">
             <p>16 英寸焕彩触控全面屏</p>
              <div class="ziti_4">一看,</div>
              <div class="ziti_4" style="margin-bottom: 40px;">就是大场面</div>
              <div class="ziti_5" >16 英寸开阔玻璃大屏，为专业创作而生。四边微窄边框，高达 90% 屏占比6，设计图纸、剪辑视频，尽管放开手脚。3:2 屏幕比例，纵向浏览更多，处理表格，效率不止高一点。更支持十点触控，放大细节，滑动图片，指尖轻松操控</div>
          </div>
          <div class="s3_2">
              <div class="s3_2_1"></div>
              <div class="s3_2_1_1"><p>16:9</p></div>
              <div class="s3_2_2"><p>3:2</p></div>
          </div>
          <div class="s3_3">
            <div class="s3_3_1">
              <img src="./imges/imges_首页3/10001.svg" width="70px" alt="">
              <p>德国莱茵 TÜV 低蓝光认证</p>
            </div>
            <div class="s3_3_2">
              <img src="./imges/imges_首页3/10001.svg" width="70px" alt="">
              <p>德国莱茵 TÜV 无频闪认证</p>
            </div>
          </div>
           <div class="s3_4">
             <div class="s3_4_1">
              <span class="ziti_3">2.5K 高分辨率高色准 </span>
              <div class="ziti_4">得见，</div>
              <div class="ziti_4">色彩的“真”面目</div>
             </div>
            <div class="s3_4_2">
              <ul>
                <li>  <p>2.5K</p>
                  <p>高分辨率</p></li>
                <li>  <p>100% sRGB</p>
                  <p>广色域</p></li>
                <li>  <p>10.7 亿</p>
                  <p>丰富色彩</p></li>
                <li>  <p>德国莱茵</p>
                  <p> TÜV 色准认证</p></li>
                <li>  <p>ΔE＜1</p>
                  <p>高色准</p></li>
                <li style="float: right; margin-right: 58px;">  <p>1500:1</p>
                  <p>对比度</p></li>
              </ul>
            </div>
            <div class="s3_4_3">
              <img src="./imges/imges_首页3/10008.webp" alt="">
              <p>这块屏，拥有专业级屏幕显示效果。2.5K 高分辨率下，任何画作细节，都能高清显形。具备</p>
              <p>100% sRGB 广色域9，能呈现 10.7 亿丰富色彩10，万物之色，柔滑渐变，由你信手拿捏。进行逐台 3D</p>
              <p>LUT 硬件校色，显示效果达到 ΔE＜1 高色准11，获德国莱茵 TÜV 色准认证12，本色还原你的大作。</p>
            </div>
            <div class="s3_4_4">
            <div class="s3_4_4_left">
               <p class="ziti_3">黑白电子书</p>
               <p class="ziti_4">纸般质感，</p>
               <p class="ziti_4">舒适阅读</p>
            </div>
            <div class="s3_4_4_right">
              <p class="ziti_3">电子书模式13，类纸张的显示效果，长时间阅读时缓</p>
              <p class="ziti_3">解观看不适14，字体自动变粗，呵护双眼，打造更为</p>
              <p class="ziti_3">舒适的阅读体验。</p>
            </div>
            <img src="./imges/imges_首页3/10009.webp" width="1200px" alt="">
            </div>
           </div>
           <div class="s3_5">
            <div class="s3_5_1">
              <p >锐薄金属机身</p>
              <div class="ziti_4" style="margin: 10px 0;">精巧轮廓，很利落</div>
              <div class="s3_5_1_1">
                <p>简约利落金属机身15，以精致钻切与</p>
                <p>细腻喷砂工艺造就，搭配深空灰、</p>
                <p>皓月银经典配色，触手温润顺滑，</p>
                <p>看着赏心悦目。机身最厚处仅</p>
                <p>17.8 毫米16， 精巧转轴设计，优雅单手</p>
                <p>开合</p>
              </div>
            </div>
            <img src="./imges/imges_首页3/10010.webp" alt="" height="600px" class="s3_5_2">
          </div>
        </div>

          
        <div class="guodu">
          <p>性能爆表，效率拔群</p>
         </div>

         <div class="screen4">
             <div class="s4_1">
              <div class="ziti_4">第 13 代英特尔®酷睿™ i9</div>
              <div class="ziti_4">Evo™ 认证笔记本</div>
              <p>HUAWEI MateBook 16s 2023 全系获英特尔® Evo™ 认证，最高搭载第 13 代酷睿™ i9 标压处理器2，高能模式下18性能释放可达 60 W19。全新性能核、能效核混合 CPU 架构，实现多核性能大步跃升。重度办公、视频剪辑、高性能软件运行，性能核任主力；后台渲染输出、素材下载等任务，能效核来分担。如此，处理再繁杂的任务，照样有条不紊，流畅到底。</p>
            </div>
            <div class="s4_2">
              <div class="s4_2_1">
                <ul>
                 <li><div>Windows 11 家庭版</div> <p>操作系统</p></li>
                 <li><div >14 核 20 线程20</div> <p>Intel 7 工艺制程</p></li>
                 <li><div>60 W19</div> <p>高能模式</p></li>
                 <li><div>32 GB21</div><p>双通道大内存</p></li>
                 <li><div>1 TB22</div><p>PCIe SSD</p></li>
                </ul>
             </div>
           </div>
             <div class="s4_3">
                  <div class="s4_3_1">
                    <p class="ziti_3">Super Turbo</p>
                    <div class="ziti_4">天生快一生快</div>
                    <p class="ziti_3">硬件、系统、场景的融合，高性能智慧调度大师。引领未来移动办公技术，快人一步的超体验。精细化对场景负载识别，性能智慧调度，大幅提升大文件和应用启动速度，打开 1 GB PPT 文件速度提升约 17%23，让笔记本反应速度跟上你的灵感。</p>
                  </div>
                  <div class="s4_3_2"></div>
              </div>

              <div class="s4_4">
                <div class="s4_4_1">
                  <p class="ziti_3"> 超材料天线</p>
                  <div class="ziti_4">270 米5超远连网</div>
                  <p class="ziti_3">搭载新一代 Wi-Fi 天线。连接范围更广，边走边视频，从办公室内到室外，时刻都在线。抗干扰和穿墙性能迭代升级，在人多的图书馆、装饰多的咖啡馆，也能保持网课、网络游戏丝滑顺畅。</p>
                </div>
                <div class="s4_4_2"></div>
            </div>

            <div class="s4_5">
               <video src="./imges/imges_首页3/video-2.mp4" width="1472px" loop autoplay> </video>
               <div class="s4_5_content">
                  <div class="s4_5_1">
                  <div>静默散热，</div>
                  <div>成就高能时刻</div>
                  </div>
                  <div class="s4_5_2">
                  <p>鲨鱼鳍电竞级双风扇，散热本领更精进。79 片鲨鱼鳍超纤扇叶，高速运转，协同转轴处的双进风口，带来超大进风量，配合加厚热管均匀降温，环环相扣，大幅消散热量。让你挥洒创意时，尽显冷静从容。</p>
                  </div>
                  <div class="s4_5_3">
                    <ul>
                      <li><div>75 mm+</div><p>电竞级尺寸双风扇24</p></li>
                      <li><div>75 mm+</div><p>电竞级尺寸双风扇24</p></li>
                      <li><div>75 mm+</div><p>电竞级尺寸双风扇24</p></li>
                      <li><div>75 mm+</div><p>电竞级尺寸双风扇24</p></li>
                    </ul>
                 </div>
               </div>
            </div>
         </div>


                  <!-- 底部 -->
    <div class="footer">
      <div class="wrapper">
          <div class="footer_text">
            <p></p>
            <p></p>
            <p></p>
            <p></p>
            <p></p>
            <p></p>
            <p></p>
            <p></p>
            <p></p>
            <p></p>
              <p>价格仅供参考，具体价格请以华为商城展示为准。</p>
              <p></p>
              以上页面中的产品图片、视频及屏幕内容仅作示意，实物产品效果（包括但不限于外观、颜色、尺寸）和屏幕显示内容（包括但不限于背景、UI、配图、视频）可能略有差异，请以实物为准。
              <p></p>
              部分产品配件需单独购买，页面效果仅供参考。
              <p></p>
              以上页面中的数据为理论值，均来自华为内部实验室，于特定测试环境下所得（请见各项具体说明），实际使用中可能因产品个体差异、软件版本、使用条件和环境因素不同略有不同，请以实际使用的情况为准。
              <p></p>
              由于产品批次和生产供应因素实时变化，为尽可能提供准确的产品信息、规格参数、产品特性，华为可能实时调整和修订以上页面中的文字表述、图片效果等内容，以求与实际产品性能、规格、指数、零部件等信息相匹配。
              <p></p>
              如遇确有进行上述修改和调整必要的情形，恕不专门通知。
          </div>
          <div class="main">
              <a href="#">主页</a>
              <span> / </span>
              手机
          </div>
          <div class="footer_links">
              <ul>
                  <li>
                      <h3>购买产品</h3>
                      <ul class="inter">
                          <li>
                              <a href="#" title="手机">
                                  手机</a>
                          </li>
                          <li>
                              <a href="#" title="笔记本">
                                  笔记本</a>
                          </li>
                          <li>
                              <a href="#" title="台式机">
                                  台式机</a>
                          </li>
                          <li>
                              <a href="#" title="显示器">
                                  显示器</a>
                          </li>
                          <li>
                              <a href="#" title="打印机">
                                  打印机</a>
                          </li>
                          <li>
                              <a href="#" title="平板">
                                  平板</a>
                          </li>
                          <li>
                              <a href="#" title="智慧屏">
                                  智慧屏</a>
                          </li>
                          <li>
                              <a href="#" title="穿戴">
                                  穿戴</a>
                          </li>
                          <li>
                              <a href="#" title="耳机音箱">
                                  耳机音箱</a>
                          </li>
                          <li>
                              <a href="#" title="路由器">
                                  路由器</a>
                          </li>
                          <li>
                              <a href="#" title="配件">
                                  配件</a>
                          </li>
                          <li>
                              <a href="#" title="商用产品">
                                  商用产品</a>
                          </li>
                          <li>
                              <a href="#" title="教育商店">
                                  教育商店</a>
                          </li>
                      </ul>
                  </li>
                  <li>
                      <h3>服务支持</h3>
                      <ul class="inter">
                          <li>
                              <a href="#" title="保修政策">
                                  保修政策</a>
                          </li>
                          <li>
                              <a href="#" title="上门安装">
                                  上门安装</a>
                          </li>
                          <li>
                              <a href="#" title="维修服务">
                                  维修服务</a>
                          </li>
                          <li>
                              <a href="#" title="保修期及权益查询">
                                  保修期及权益查询</a>
                          </li>
                          <li>
                              <a href="#" title="维修备件价格">
                                  维修备件价格</a>
                          </li>
                          <li>
                              <a href="#" title="服务进度查询">
                                  服务进度查询</a>
                          </li>
                          <li>
                              <a href="#" title="联系我们">
                                  联系我们</a>
                          </li>
                          <li>
                              <a href="#" title="服务隐私声明">
                                  服务隐私声明</a>
                          </li>
                          <li>
                              <a href="#" title="商用服务">
                                  商用服务</a>
                          </li>
                      </ul>
                  </li>
                  <li>
                      <h3>应用与下载</h3>
                      <ul class="inter">
                          <li>
                              <a href="#" title="终端云服务">
                                  终端云服务</a>
                          </li>
                          <li>
                              <a href="#" title="华为商城APP">
                                  华为商城APP</a>
                          </li>
                          <li>
                              <a href="#" title="我的华为APP">
                                  我的华为APP</a>
                          </li>
                          <li>
                              <a href="#" title="华为手机助手">
                                  华为手机助手</a>
                          </li>
                          <li>
                              <a href="#" title="华为电脑管家">
                                  华为电脑管家</a>
                          </li>
                          <li>
                              <a href="#" title="HarmonyOS 4">
                                  HarmonyOS 4</a>
                          </li>
                          <li>
                              <a href="#" title="预置应用公示">
                                  预置应用公示</a>
                          </li>
                      </ul>
                  </li>
                  <li>
                      <h3>新闻中心</h3>
                      <ul class="inter">
                          <li>
                              <a href="#" title="华为新闻">
                                  华为新闻</a>
                          </li>
                          <li>
                              <a href="#" title="华为活动">
                                  华为活动</a>
                          </li>
                      </ul>
                  </li>
                  <li>
                      <h3>关于我们</h3>
                      <ul class="inter">
                          <li>
                              <a href="#" title="关于我们">
                                  关于我们</a>
                          </li>
                          <li>
                              <a href="#" title="可持续发展">
                                  可持续发展</a>
                          </li>
                          <li>
                              <a href="#" title="隐私">
                                  隐私</a>
                          </li>
                          <li>
                              <a href="#" title="华为商城">
                                  华为商城</a>
                          </li>
                          <li>
                              <a href="#" title="华为云">
                                  华为云</a>
                          </li>
                          <li>
                              <a href="#" title="企业业务">
                                  企业业务</a>
                          </li>
                          <li>
                              <a href="#" title="运营商网络">
                                  运营商网络</a>
                          </li>
                          <li>
                              <a href="#" title="华为集团">
                                  华为集团</a>
                          </li>
                          <li>
                              <a href="#" title="加入华为">
                                  加入华为</a>
                          </li>
                          <li>
                              <a href="#" title="内容举报">
                                  内容举报</a>
                          </li>
                      </ul>
                  </li>
              </ul>

          </div>
          
      </div>
  </div>

        <script>
         //专业
        ScrollTrigger.create({
         trigger:'.s2_3',
         start:'-=800',
         end:'+=400',
        //  markers:true,
         scrub:true,
         animation:gsap.from('.s2_3 p',{scale: 1.8,duration: 1}),
         animation:gsap.to('.s2_3 p',{scale: 1,duration: 1})
         })

         //图片固定
         ScrollTrigger.create({
         trigger:'.s3_2',
         start:'-=450',
         end:'+=440',
         pin:true,
        //  markers:true,
         scrub:true,
         animation:gsap.from('.s3_2',{duration: 1}),
         animation:gsap.to('.s3_2',{duration: 1})
         })

         //再次
         ScrollTrigger.create({
         trigger:'.s3_2',
         start:'-=150',
         end:'+=1800',
         pin:true,
        //  markers:true,
         scrub:true,
         animation:gsap.from('.s3_2',{duration: 1}),
         animation:gsap.to('.s3_2',{duration: 1})
         })

         //边框显现
        ScrollTrigger.create({
         trigger:'.s3_2 .s3_2_1',
         start:'-=100',
         end:'+=600',
        //  markers:true,
         scrub:true,
         animation:gsap.from('.s3_2_1',{ opacity:0, duration: 2}),
         animation:gsap.to('.s3_2_1',{ opacity:1, duration: 2})
         })

          //16：9文字显现
         ScrollTrigger.create({
         trigger:'.s3_2 .s3_2_1_1 p',
         start:'+=200',
         end:'+=600',
        //  markers:true,
         scrub:true,
         animation:gsap.from('.s3_2_1_1 p',{ opacity:0, duration: 2}),
         animation:gsap.to('.s3_2_1_1 p',{ opacity:1, duration: 2})
         })

         //16：9文字消失
         ScrollTrigger.create({
         trigger:'.s3_2 .s3_2_1_1 p',
         start:'+=600',
         end:'+=600',
        //  markers:true,
         scrub:true,
         animation:gsap.from('.s3_2_1_1 p',{ opacity:1, duration: 2}),
         animation:gsap.to('.s3_2_1_1 p',{ opacity:0, duration: 2})
         })



       //3:2显现
       ScrollTrigger.create({
         trigger:'.s3_2 .s3_2_2 p',
         start:'+=1000',
         end:'+=600',
        //  markers:true,
         scrub:true,
         animation:gsap.from('.s3_2_2 p',{ opacity:0, duration: 2}),
         animation:gsap.to('.s3_2_2 p',{ opacity:1, duration: 2})
         })


       //图片左移
       ScrollTrigger.create({
         trigger:'.s3_5_2',
         start:'-=300',
         end:'+=400',
        //  markers:true,
         animation:gsap.to('.s3_5_2',{ x:-440, duration: 2})
         })

            //文字显现
       ScrollTrigger.create({
         trigger:'.s3_5_1_1',
         start:'-=400',
         end:'+=100',
        //  markers:true,
         animation:gsap.from('.s3_5_1_1',{ opacity:0, y:30,duration: 1}),
         animation:gsap.to('.s3_5_1_1',{ opacity:1,y:0, duration: 1})
         })

         ScrollTrigger.create({
         trigger:'.guodu',
         start:'-=730',
         end:'+=400',
        //  markers:true,
         scrub:true,
         animation:gsap.from('.guodu',{scale: 1.8,duration: 1}),
         animation:gsap.to('.guodu',{scale: 1,duration: 1})
         })

         ScrollTrigger.create({
         trigger:'.s4_5 video',
         start:'-=680',
         end:'+=400',
        //  markers:true,
         scrub:true,
         animation:gsap.from('.s4_5 video',{scale: 0.8,duration: 1}),
         animation:gsap.to('.s4_5 video',{scale: 1,duration: 1})
         })
        </script>
</body>
</html>